<template>
  <div>
    <a-modal
      width="40%"
      v-model:visible="visible"
      title="链接分类"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <a-form
        ref="formRef"
        :model="formState"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          style="margin-top: 1rem"
          label="链接分类名称"
          name="name"
          :rules="[{ required: true, message: '请输入链接分类名称!' }]"
        >
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="标记" name="flag" :rules="[{ required: true, message: '请选择标记!' }]">
          <a-select v-model:value="formState.flag" :options="linksOptions.flagOptions" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, inject } from 'vue';
  import { addLinkCategory, editLinkCategory } from '/@/api/cms/linkcategory';
  import { message } from 'ant-design-vue';

  const htValue = ref<string>('http://');
  interface FormState {
    name: string;
    flag: number;
    id: number;
    odr?: number;
  }
  const formRef = ref<any>();
  const formState = reactive<any>({
    name: '',
    flag: '',
    id: '',
  });

  const visible = ref<boolean>(false);
  const modelStatus = ref<string>('');
  const linksOptions = reactive({
    flagOptions: [
      {
        label: '正常',
        value: '0',
      },
      {
        label: '禁用',
        value: '5',
      },
      {
        label: '已删除',
        value: '9',
      },
    ],
  });

  // 接受父组件传递的获取链接列表的方法
  const getQueryLinks: any = inject('getQueryLinks');

  // 初始化弹窗
  const showModal = (status: string) => {
    modelStatus.value = status;
    visible.value = true;
  };

  const handleOk = async () => {
    try {
      const values = await formRef.value.validateFields();
      formState.url = htValue.value + values.url; // url 地址拼接处理
      // 使用as 类型声明参数
      if (modelStatus.value === 'add') {
        addLinkCategory(formState as FormState)
          .then((res) => {
            message.success('新增链接分类成功!');
            handleAterClose();
            getQueryLinks();
          })
          .catch((e) => {
            message.error(e);
          });
      } else {
        editLinkCategory(formState as FormState)
          .then((res) => {
            message.success('修改链接分类成功!');
            handleAterClose();
            getQueryLinks();
          })
          .catch((e) => {
            message.error(e);
          });
      }
    } catch (errorInfo) {}
  };
  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
  };
  // 完全关闭，清空
  const handleAterClose = () => {
    formRef.value.resetFields();
    modelStatus.value = '';
    visible.value = false;
  };

  // 编辑赋值
  const editInit = (data) => {
    formState.id = data.id;
    formState.cid = data.cid;
    formState.flag = data.flag;
    formState.name = data.name;
    showModal('edit');
  };

  defineExpose({
    showModal,
    formState,
    editInit,
  });
</script>

<style scoped></style>
